import styled from "styled-components"

const MyNavBarWrapper = styled.div`
    height: .4rem;
    display:flex;
    background:#ffffff;
    justify-content:space-between;
    align-items: center;
    padding: .1rem .2rem 0rem;
    
    h1{
        font-size:.275rem;
        color:#333333;
    }
`

const MyCardsWrapper = styled.div`
    background:#ffffff;
    padding: .225rem .2rem;
    border-bottom:.1rem solid #f2f2f2;

    .changeMembers{
        height: .6rem;
        position: relative;
        button{
            border:none;
            width: 1.025rem;
            height: 0.325rem;
            color: #2984f8;
            background-color: #ffffff;
            border-radius: .2rem;
            position: absolute;
            right: 0;
            bottom: 0;
        }
    }
`

const MyListWrapper = styled.div`
    background-color: #ffffff;
    div{
        display: flex;
        flex: 1;
        justify-content: center;
        align-items: center;
        height: .5rem;
        margin-left: .2rem;
        padding-right: .2rem;

        div{
            justify-content: left;
            font-size: .16rem;
            margin-left: .13rem;
        }
    }
`

const CardItemWrapper = styled.div`
    display: flex;
    flex: 1;
    height: .6rem;

    img{
        width: .65rem;
        height: .65rem;
        margin-right: .1rem;
    }
    >div >div span{
        font-size:.2rem;
    }
    >div div i{
        font-size:.14rem;
        margin-right: .05rem;
    }
`



export {
    MyNavBarWrapper,
    MyCardsWrapper,
    MyListWrapper,
    CardItemWrapper,
}